<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Chat</title>
    <link rel="stylesheet" href="/css/chat.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="chat-container">
        <div class="chat-header">AI Chat Assistant</div>
        
        <div class="user-id-container">
            <label for="user-id">User ID:</label>
            <input type="number" id="user-id" min="1" value="1">
            <button id="clear-history" title="Clear Chat History">
                <i class="fas fa-trash"></i>
            </button>
        </div>
        
        <div class="chat-messages" id="chat-messages">
            <div class="message bot-message">
                你好！我是Zxt的小管家，是博客小屋的智能客服哦。我可以帮助你查询博客网站中的文章与分类，或者查找作者信息。你可以告诉我你想了解哪方面的内容吗？
            </div>
        </div>
        
        <div class="chat-input">
            <input type="text" id="message-input" placeholder="Type your message..." autocomplete="off">
            <button id="send-button">
                <i class="fas fa-paper-plane"></i>
            </button>
        </div>
    </div>

    <script src="/js/chat.js"></script>
</body>
</html> 